<template>
	<view class="container">
		<!-- 轮播图 -->
		<u-swiper :list="locationImages" height="400rpx" mode="aspectFill" class="animated-item" style="animation-delay: 0.1s"></u-swiper>

		<!-- 基本信息 -->
		<view class="info-section animated-item" style="animation-delay: 0.2s">
			<view class="title">
				<text class="">{{ locationList.name }}</text>
			</view>
			<u-rate :value="locationList.rating" readonly size="22"></u-rate>
			<view class="address-box">
				<u-icon name="map" size="32"></u-icon>
				<text>{{ locationList.address }}</text>
			</view>
		</view>

		<view class="tab-content animated-item" style="animation-delay: 0.3s">
			<!-- 主标签栏 -->
			<u-tabs style="padding-top: 50rpx;" :list="tabs" lineWidth="60" lineColor="black"
				itemStyle="padding-left: 30px; padding-right: 30px; height: 50px;" :activeStyle="{
                    color: '#303133',
                    fontWeight: 'bold',
                }" :inactiveStyle="{
                    color: '#606266',
                }" :current="currentTab" @change="changeTab">
			</u-tabs>

			<view v-show="currentTab === 0" class="animated-item" style="animation-delay: 0.4s">
				<view class="section">
					<view class="section-content">
						<text class="description">{{ locationList.description }}</text>
					</view>
				</view>
			</view>
			<!-- 地图展示 -->
			<view class="page-section page-section-gap animated-item" style="animation-delay: 0.5s">
				<map style="width: 100%; height: 300px;" :latitude="locationList.latitude"
					:longitude="locationList.longitude" class="map-container" :markers="covers"></map>
			</view>
		</view>
		<!-- 打卡按钮 -->
		<u-popup :show="showPunchResult" mode="bottom" :border-radius="16" @close="close" @open="open">
			<view class="punch-popup">
				<view class="result-content">
					<template v-if="punchStatus === 'success'">
						<u-icon name="checkmark-circle-fill" color="#19be6b" size="80"></u-icon>
						<view class="result-text">打卡成功！</view>
						<view class="result-subtext">已记录 {{ punchDate }}</view>
					</template>
					<template v-if="punchStatus === 'fail'">
						<u-icon name="close-circle-fill" color="#fa3534" size="80"></u-icon>
						<view class="result-text">打卡失败</view>
						<view class="result-subtext">请靠近地点后重试</view>
					</template>
					<u-button type="primary" plain @click="closePunchPopup" class="confirm-btn">确定</u-button>
				</view>
			</view>
		</u-popup>
		<view class="footer animated-item" style="animation-delay: 0.6s">
			<u-button style="color: black; background-color: #fff4f4; border: none;" type="primary" @click="handlePunch">
				<uni-icons type="location" :size="30" color="#000000" />
				点我立即打卡
			</u-button>
		</view>
	</view>
</template>

<script>
	import {
		getStudylocation,
		listStudypunch,
	} from '@/api/studytourism/studylocation';
	import {
		applistStudypunch,
		addStudypunch,
	} from '@/api/studytourism/studypunch';
	import storage from '@/utils/storage';
	import config from '../../../config';
	export default {
		data() {
			return {
				covers: [{
					id: 1,
					latitude: 0,
					longitude: 0,
					iconPath: '@/static/images/location.png',
					width: 30,
					height: 30
				}],
				baseurl: config.baseUrl,
				locationList: {
					locationId: null
				},
				locationImages: [],
				currentTab: 0,
				tabs: [{
						name: '地点详情'
					}
				],
				showPunchResult: false,
				punchStatus: '',
				punchDate: ''
			};
		},
		onLoad(option) {
			this.locationList.locationId = option.locationId
			this.getLocationList()
		},
		methods: {
			getLocalDateString() {
				const date = new Date();
				const year = date.getFullYear();
				const month = String(date.getMonth() + 1).padStart(2, '0');
				const day = String(date.getDate()).padStart(2, '0');
				return `${year}-${month}-${day}`;
			},
			async getLocationList() {
				const res = await getStudylocation(this.locationList.locationId)
				if (res.code === 200) {
					this.locationList = res.data
					this.covers[0].latitude = res.data.latitude
					this.covers[0].longitude = res.data.longitude
					this.locationImages = this.locationList.images[0].imageUrl.split(',')
					this.locationImages = this.locationImages.map(item => this.baseurl + item)
				}
			},
			close() {},
			open() {},
			changeTab(item) {
				this.currentTab = item.index;
			},
			async handlePunch() {
				const params = {
					locationId: this.locationList.locationId,
					punchDate: this.getLocalDateString(),
				}
				const checkRes = await applistStudypunch(params)
				const hasPunched = checkRes.rows && checkRes.rows.some(item => {
					return item.locationId === this.locationList.locationId &&
						item.punchDate === params.punchDate
				})
				if (hasPunched) {
					uni.showToast({
						title: '您已打卡',
						icon: 'none'
					})
					return
				}
				const res = await addStudypunch({
					locationId: this.locationList.locationId,
					locationName: this.locationList.name,
					latitude: this.locationList.latitude,
					longitude: this.locationList.longitude,
					userId: this.$store.state.user.userId
				})
				if (res.code === 200) {
					this.punchStatus = 'success'
					this.punchDate = new Date().toLocaleString()
					this.showPunchResult = true
				} else {
					this.punchStatus = 'fail'
					this.showPunchResult = true
				}
			},
			closePunchPopup() {
				this.showPunchResult = false
			},
			openMap() {
				uni.openLocation({
					latitude: this.locationList.latitude,
					longitude: this.locationList.longitude,
					name: this.locationList.name,
					address: this.locationList.address
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding: 0;
		margin: 0;
	}

	.info-section {
		padding: 20rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 5rpx rgba(0, 0, 0, 0.1);
	}

	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		padding: 10rpx;
		margin-bottom: 10rpx;
	}

	.description {
		font-size: 28rpx;
		color: #666;
		margin-top: 10rpx;
		margin-bottom: 20rpx;
	}

	.address-box {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #666;
		margin: 50rpx 0;
	}

	.map-container {
		height: 400rpx;
		margin-bottom: 20rpx;
	}

	.tab-content {
		margin-top: 25rpx;
		padding: 28rpx;
		background-color: #fff;
		border-radius: 20rpx;
		box-shadow: 0 0 15rpx rgba(0, 0, 0, 0.1);
	}

	.footer {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		color: #000000;
	}

	.section {
		margin-top: 20px;
	}

	.section-content {
		font-size: 15px;
		color: #666;
		line-height: 1.6;
	}

	.punch-popup {
		padding: 40rpx;
		min-height: 400rpx;
		.result-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			.result-text {
				font-size: 36rpx;
				margin: 20rpx 0;
				font-weight: bold;
			}
			.result-subtext {
				color: #909399;
				font-size: 28rpx;
				margin-bottom: 40rpx;
			}
			.confirm-btn {
				width: 60%;
				margin-top: 30rpx;
			}
		}
	}

	/* 新增动画样式 */
	.animated-item {
		opacity: 0;
		animation: fadeInUp 0.6s ease forwards;
	}

	@keyframes fadeInUp {
		from {
			opacity: 0;
			transform: translateY(20px);
		}
		to {
			opacity: 1;
			transform: translateY(0);
		}
	}
</style>